<template>
	<view class="detail">
		<uv-navbar :placeholder="true" bg-color="transparent" @leftClick="back">
			<image slot="left" src="https://www.guizhouqy.com/mini/back.png" style="width: 48rpx;height: 48rpx;"></image>
			<text slot="center" style="font-weight: bold;font-size: 32rpx;color: #FFFFFF;"></text>
		</uv-navbar>
		<!-- <view class="hearder">
			<image src="https://www.guizhouqy.com/mini/back.png" mode="" @click="back"></image>
		</view> -->
		<view class="box1">
			<image :src="activeImg" mode="aspectFill"></image>
		</view>
		<view class="box2">
			<scroll-view class="ss-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
				<view v-for="(item, index) in imgList" :key="index" class="nav-item"
					:class="{current: index === tabCurrentIndex}" @click="tabChange(index,item)" :id="'item-' + index">
					<view class="img">
						<image :src="item" mode="aspectFill" class="slide-image" :class="index == tabCurrentIndex?'active':''" />
					</view>
				</view>
			</scroll-view>
			<view class="miscellaneous">
				<view class="left">
					<image :src="detailArray.avatar" mode=""></image>
					<view class="sundries">
						<view class="name">{{detailArray.assistant_name}}</view>
						<view class="tip">{{detailArray.signature}}</view>
					</view>
				</view>
				<view class="right">
					<text style="color: #e85a57">{{detailArray.price}}</text> 元/分钟
				</view>
			</view>
			<view class="but  bottom-safe">
				<view @click="navTo('/pages/help/appointment?user_id='+ detailArray.user_id)">预约</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goLogin,
		checkLogin
	} from '@/libs/login';
	export default {
		data() {
			return {
				scrollLeft: 0,
				widthList: [],
				screenWidth: 0,
				tabCurrentIndex:0,
				detailArray:{},
				imgList:[],
				activeImg:"",
				isLogin:false
			}
		},
		onLoad(options) {
			this.getData(options.user_id)
		},
		onShow() {
			this.isLogin = this.$store.getters.isLogin
			if (this.isLogin) {
				this.userInfo = JSON.parse(this.$store.getters.userInfo)
				console.log(this.userInfo)
			}
		},
		methods: {
			//获取助教详情
			async getData(user_id) {
				uni.showLoading({
					title: '请稍后'
				})
				let res = await this.$api.meadowlands.getAssistantDetails.get({
					user_id
				})
				uni.hideLoading()
				if (res.code == 0) {
					// this.$tool.success(res.msg);
					this.detailArray = res.data
					this.imgList = res.data.candid_photo
					this.activeImg = this.imgList[0]
				} else {
					this.$tool.error(res.msg);
				}
			},
			back(){
				uni.navigateBack({
				  delta: 1 
				});
			},
			navTo(url) {
				if (!this.isLogin) {
					goLogin();
				}
				uni.navigateTo({
					url
				})
			},
			/**
			 * 导航栏navbar
			 * 点击事件
			 */
			tabChange(index,item) {
				this.tabCurrentIndex = index
				this.activeImg = item
				var widthArr = this.widthList;
				var scrollWidth = 0;
				for (var i = 0; i < index + 1; i++) {
					scrollWidth += widthArr[i];
				}
				let currentWidth = widthArr[index];
				// scrollView 居中算法
				// 减去固定宽度位移
				// 减去选中的bar的宽度的一半
				scrollWidth -= this.screenWidth / 2;
				scrollWidth -= currentWidth / 2;
				this.scrollLeft = scrollWidth;
			},
			calculateItemWidth() {
				var that = this;
				var arr = [];
				let w = 0;
				this.imgList.forEach((item, index) => {
					let view = uni.createSelectorQuery().in(this).select("#item-" + index);
					view.fields({
						size: true
					}, data => {
						arr.push(data.width);
					}).exec();
				})
				this.widthList = arr;
			},
			calculateWindowWidth() {
				var info = uni.getSystemInfoSync();
				this.screenWidth = info.screenWidth;
			}
		},
		created() {
			var that = this;
			this.calculateWindowWidth();
			setTimeout(function() {
				that.calculateItemWidth();
			}, 1000);
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		.hearder {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			padding: 0 38rpx;
			padding-top: 30px;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 10;
			/* 确保在顶层 */

			image {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.box1 {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100vh;

			image {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}

		.box2 {
			width: 100%;
			height: 478rpx;
			background: #ffffff;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			z-index: 5;

			.list {
				padding: 34rpx 26rpx 32rpx;
				border-bottom: 2rpx solid rgba(153, 153, 153, 0.2);
			}

			.miscellaneous {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 62rpx;
				padding: 0 16rpx;

				.left {
					display: flex;
					flex-direction: row;
					align-items: center;

					image {
						width: 128rpx;
						height: 128rpx;
						border-radius: 50%;
						border: 2rpx solid #9a24b9;
					}

					.sundries {
						margin-left: 26rpx;

						.name {
							font-weight: bold;
							font-size: 32rpx;
							color: #333333;
						}

						.tip {
							font-weight: bold;
							font-size: 24rpx;
							color: #999999;
							margin-top: 8rpx;
						}
					}
				}

				.right {
					padding-right: 28rpx;
					font-weight: 500;
					font-size: 24rpx;
					color: #666666;
				}
			}

			.but {
				width: 100%;
				height: 98rpx;
				background: #ffffff;
				box-shadow: 0rpx -2rpx 4rpx 0rpx rgba(153, 153, 153, 0.16);
				padding: 0 24rpx;
				padding-top: 10rpx;

				view {
					width: 100%;
					height: 80rpx;
					background: linear-gradient(313deg, #7116e9 0%, #15d1e2 100%);
					border-radius: 16rpx;
					color: #ffffff;
					font-size: 32rpx;
					font-weight: bold;
					display: flex;
					flex-direction: row;
					align-items: center;
					justify-content: center;
				}
			}
		}
	}

	.ss-scroll-navbar {
		width: calc(100% - 48rpx);
		white-space: nowrap;
		padding-top: 34rpx;
		margin-left: 24rpx;
		margin-bottom: 32rpx;

		.nav-item {
			text-align: center;
			padding: 0upx 20upx;
			color: #303133;
			display: inline-block;
			position: relative;
			font-size: 30upx;
			.img{
				width: 128rpx;
				height: 128rpx;
				image{
					width: 128rpx;
					height: 128rpx;
					border-radius: 16rpx 16rpx 16rpx 16rpx;
				}
			}
		}
	}
	.active{
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 4rpx solid #9A24B9;
	}
</style>